import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './zjc.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import icon_create_wallet_verify from '@/assets/icon_create_wallet_verify.png'
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
import ZjcUtil from "@/utils/zjcUtil";
import { LangEn } from "@/utils/langEn";

/**
 * 登录页
 */
export default function ZjcCreate() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    // zjc 列表
    const [zjcList, setZjcList] = useState([])

    // 文案翻译
    const [curLang, setCurLang] = useState(LangEn);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false)

        // 判断助记词是否有效
        let curZjc = ZjcUtil.zjc
        if (!curZjc || curZjc.length <= 0) {
            history.replace('/register');
            return;
        }

        // 分割
        let zjcStringList = curZjc.split(",");
        let allList = zjcStringList.filter((value) => {
            return value.length > 0;
        })

        if (allList.length < 12) {
            history.replace('/register');
            return;
        }

        let indexFormat = (index) => {
            let nextIndex = (index + 1);
            if (nextIndex >= 10) {
                return "" + nextIndex;
            } else {
                return "0" + nextIndex;
            }
        }

        let list = []
        for (let i = 0; i < allList.length; i++) {
            let label = allList[i];
            let tag = indexFormat(i);
            let item = { label: label, tag: tag }
            list.push(item)
        }
        setZjcList(list)

        //打点
        doHitEvent("ZJC_START")

        return () => {
            //打点
            doHitEvent("ZJC_END")
        }
    }, [])

    // 点击提交
    const onHandleSubmit = () => {
        console.log("点击提交");

        // 跳转验证页
        history.replace('/zjcverify')
    };

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);
        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    // 查询用户状态返回

    return (
        <div className="pageRoot pageContentPaddingHorizontal16px">
            {/* <NavigateBar theme="white" showLogout={false} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}></NavigateBar> */}

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            {/* 标题 */}
            <div className={styles.zjcTitleLarge}>{curLang.zjcCreateCreateWallet}</div>
            <div className="pageContentRow pageMarginTop30px">
                <img className={styles.zjcGuideIcon} src={icon_create_wallet_verify} alt="" />
                <div className={styles.zjcTitleDefault}>{curLang.zjcCreateBackupMnemonicPhrase}</div>
            </div>

            {/* zjc 列表 */}
            <div className={styles.zjcList}>
                <div className={styles.zjcListContent}>
                    {zjcList && zjcList.map((value, index) => {
                        return (
                            <div className={styles.zjcListItem} key={index}>
                                <div className={styles.zjcListItemLabel}>{value.label}</div>
                                <div className={styles.zjcListItemTag}>{value.tag}</div>
                            </div>
                        )
                    })}
                </div>
            </div>

            {/* 提交 */}
            <div className="pageBtnSubmit pageMarginTop16px" onClick={onHandleSubmit}>{curLang.zjcCreateIRemember}</div>

            {/* 底部提示 */}
            <div className="pageContentRowFull pageMarginTop30px">
                <div className={styles.zjcTipsDot}></div>
                <div className={styles.zjcTips}>{curLang.zjcCreateTips1}</div>
            </div>
            <div className="pageContentRowFull pageMarginTop10px">
                <div className={styles.zjcTipsDot}></div>
                <div className={styles.zjcTips}>{curLang.zjcCreateTips2}</div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}